<template>
  <div class="member_container">
    <!-- 头部内容 -->
    <div class="header">
      <router-link class="returned" to="/home"><i class="iconfont backarrow"></i></router-link>
      <div class="weather_box">
        <div id="he-plugin-simple"></div>
      </div>
      <router-link class="logo" to="/home"><i class="iconfont wandaicon"></i></router-link>
    </div>
    <!-- 主体内容 -->
    <div class="member_box">
      <div class="title"><i class="iconfont huiyuan"></i>会员说明</div>
      <!-- title end -->
      <div class="product_img"><img src="../Member/images/img1.png" alt="" /></div>
      <!-- product image end -->
      <div class="member_text" style="display: none;">
        <h2>会员说明</h2>
        <p>
          会员说明
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {}
  },
  methods: {},
  created () {
    window.WIDGET = {
      CONFIG: {
        modules: '01234',
        background: '5',
        tmpColor: '404A56',
        tmpSize: '40',
        cityColor: '404A56',
        citySize: '0',
        aqiColor: '404A56',
        aqiSize: '40',
        weatherIconSize: '60',
        alertIconSize: '60',
        padding: '10px 10px 10px 10px',
        shadow: '0',
        language: 'auto',
        fixed: 'false',
        vertical: 'top',
        horizontal: 'left',
        key: 'c96c78edf3474b1585e0067b5b5b8626'
      }
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0'
    document.getElementsByTagName('head')[0].appendChild(script)
  }
}
</script>

<style lang="less" scoped>
.member_container {
  width: 1080px;
  height: 1920px;
  background-color: rgba(248, 248, 248, 0.5);
  .header {
    width: 100%;
    height: 220px;
    margin-bottom: 42px;
    box-sizing: border-box;
    position: relative;
    .weather_box {
      width: auto;
      height: 98px;
      font-weight: bold;
      position: absolute;
      top: 50px;
      left: 220px;
      display: flex;
      justify-content: left;
      align-items: center;
    }
    .returned {
      width: 366px;
      height: 366px;
      color: #fff;
      border-radius: 180px;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      transition: 0.5s;
      transform: translate(-40%, -40%);
      background-color: #5650e4;
      background-image: -o-linear-gradient(-45deg, #5650e4, #74ee98);
      background-image: -moz-linear-gradient(-45deg, #5650e4, #74ee98);
      background-image: -webkit-linear-gradient(-45deg, #5650e4, #74ee98);
      background-image: linear-gradient(-45deg, #5650e4, #74ee98);
      &:hover,
      &:active {
        transition: 0.5s;
        transform: translate(-35%, -35%);
        background-image: -o-linear-gradient(-45deg, #362fd7, #4bff80);
        background-image: -moz-linear-gradient(-45deg, #362fd7, #4bff80);
        background-image: -webkit-linear-gradient(-45deg, #362fd7, #4bff80);
        background-image: linear-gradient(-45deg, #362fd7, #4bff80);
        & > .iconfont{
          transition: 0.5s;
          font-size: 5.5rem;
        }
      }
      & > .iconfont {
        transition: 0.5s;
        font-size: 5rem;
        position: absolute;
        left: 52%;
        top: 55%;
      }
    }
    .logo {
      width: 108px;
      height: 108px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #e30016;
      float: right;
      margin: 42px 60px 0 0;
      & > .iconfont {
        font-size: 6rem;
      }
    }
  }
  .member_box {
    width: 100%;
    padding: 30px 60px;
    .title {
      width: 100%;
      height: 116px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2.8rem;
      color: #404a56;
      font-weight: bold;
      background-color: #fff;
      border-radius: 60px;
      overflow: hidden;
      box-shadow: 0 0 40px rgba(92, 97, 219, 0.2);

      & > .iconfont {
        font-size: 4.4rem;
        background-image: -o-linear-gradient(to top, #362fd7, #4bff80);
        background-image: -moz-linear-gradient(to top, #362fd7, #4bff80);
        background-image: -webkit-linear-gradient(to top, #362fd7, #4bff80);
        background-image: linear-gradient(to top, #362fd7, #4bff80);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        margin-right: 24px;
        font-weight: initial;
      }
    }
    .product_img {
      width: 100%;
      height: 668px;
      display: flex;
      justify-content: center;
      align-content: center;
      overflow: hidden;
      border-radius: 30px;
      margin-top: 60px;
    }
    .member_text {
      width: 100%;
      margin-top: 60px;
      h2 {
        width: 100%;
        height: 88px;
        line-height: 88px;
        color: #404a56;
        text-align: left;
        font-size: 2.4rem;
        margin-bottom: 20px;
        font-weight: bold;
      }
      p {
        width: 100%;
        max-height: 570px;
        overflow-x: hidden;
        overflow-y: auto;
        font-size: 2rem;
        color: #5d6583;
        text-align: justify;
        letter-spacing: 1px;
        line-height: 58px;
        padding-right: 20px;
        box-sizing: border-box;
        //高宽分别对应横竖滚动条的尺寸
        &::-webkit-scrollbar {
          width: 10px;
          height: 0;
        }
        //内阴影 和 圆角
        &::-webkit-scrollbar-track {
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          border-radius: 10px;
        }
        // 内阴影 圆角
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          box-shadow: inset 0 0 6px rgba(93, 101, 131, 0.1);
          background-color: #ebebeb;
        }
      }
    }
  }
}
</style>
